<template>
    <div class="businessProcess">
        <el-form :inline="true" :model="businessProcessForm">
            <el-form-item label="选择城市">
                <el-select v-model="businessProcessForm.region" placeholder="选择城市">
                    <el-option label="北京" value="beijing"></el-option>
                    <el-option label="上海" value="shanghai"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select v-model="businessProcessForm.businessType" placeholder="请选择业务类型">
                    <el-option label="新房产权" value="xinfang"></el-option>
                    <el-option label="二手房产权" value="ershoufang"></el-option>
                    <el-option label="商业产权" value="shangye"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="businessProcessSearch" id="monitorEnter">查询</el-button>
                <el-button type="primary" @click="newBusinessProcess">新建业务流程</el-button>
            </el-form-item>
            <br/>
            <el-form-item label="业务流程名称">
                <el-input v-model="businessProcessForm.businessName" placeholder="请输入业务名称"></el-input>
            </el-form-item>
        </el-form>
        <el-table :data="businessProcessList" border>
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="" label="业务流程名称"></el-table-column>
            <el-table-column prop="" label="城市"></el-table-column>
            <el-table-column prop="" label="业务类型"></el-table-column>
            <el-table-column prop="" label="操作人"></el-table-column>
            <el-table-column label="办理材料">
                <template slot-scope='scope'>
                    <el-button type="text" @click="viewHandlingMaterials">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-button type="text" @click="handleTableItem('edit',scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleTableItem('del',scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagebar">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :total="totalSize">
            </el-pagination>
        </div>
        <el-dialog
                title="办理资料列表"
                :visible.sync="dialogVisible"
                width="50%">
            <el-table :data="handleMaterialsList" border>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="" label="材料名称"></el-table-column>
                <el-table-column prop="" label="资料类型"></el-table-column>
                <el-table-column label="样表">
                    <template slot-scope='scope'>
                        <el-button type="text" @click="handleTableItem('edit',scope.row)">查看</el-button>
                        <el-button type="text" @click="handleTableItem('del',scope.row)">下载</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="空表">
                    <template slot-scope='scope'>
                        <el-button type="text" @click="handleTableItem('edit',scope.row)">查看</el-button>
                        <el-button type="text" @click="handleTableItem('delete',scope.row)">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "businessProcess",
        components: {},
        props: {},
        data() {
            return {
                dialogVisible: false,
                businessProcessForm: {
                    city: '',
                    businessType: '',
                    businessName: ''
                },
                currentPage: 1,
                pageSize: 10,
                totalSize: 100,
                businessProcessList: [{}],
                handleMaterialsList: [{}]
            };
        },
        watch: {},
        computed: {},
        methods: {
            handleSizeChange(pageSize){
                this.pageSize = pageSize
            },
            handleCurrentChange(currentPage){
                this.currentPage = currentPage;
            },
            businessProcessSearch() {

            },
            newBusinessProcess() {

            },
            viewHandlingMaterials() {
                this.dialogVisible = true
            },
            handleTableItem(type) {
                if (type === 'del') {
                    this.$confirm('是否确认删除XXX节点？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // });
                    });
                }

            }
        },
        created() {
        },
        mounted() {
        }
    };
</script>
<style scoped>
</style>